<!--
 * @Author: byron
 * @Date: 2022-01-06 00:12:14
 * @LastEditTime: 2022-02-18 13:30:11
-->
<template>
    <div class="operations">
        <!-- <div class="main-cnt"> -->

        <span class="operat-item" title="分享" @click="shareBtn">
            <i class="iconfont icon-feijicopy"></i>
        </span>
        <span class="operat-item" title="点赞" @click="likeBtn">
            <i class="iconfont icon-xiai"></i>
        </span>
        <span class="operat-item" title="评论" @click="commentBtn">
            <i class="iconfont icon-comment"></i>
        </span>
    </div>
</template>

<script>
import { smoothSlide } from '@/utils/common'
export default {
    methods: {
        shareBtn() {
            this.clipboardWrite(window.location.href)
        },
        clipboardWrite(value) {
            window.navigator.clipboard
                .writeText(value)
                .then(() => {
                    this.$message.success({
                        message: '网址已复制到剪贴板，赶紧去分享吧！',
                        duration: 3000,
                    })
                })
                .catch((err) => {
                    this.$message.error({
                        message: err,
                        duration: 3000,
                    })
                })
        },
        likeBtn() {
            console.log(this.$message)
            this.$message({
                type: 'success',
                message: '点赞成功',
            })
        },
        commentBtn() {
            let end = this.$parent.$refs.commentRef.offsetTop
            smoothSlide(end)
        },
    },
}
</script>
<style lang="less" scoped>
.operations {
    display: block;

    .operat-item {
        display: block;
        width: 40px;
        height: 40px;
        background-color: transparent;
        border-radius: 40px;
        margin-bottom: 10px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
        transition: all 0.6s;
        i {
            font-size: 20px;
        }
    }
    .operat-item:hover {
        background-color: #e5e5e5;
    }
}
</style>
